<!-- 商品列表 -->
<template>
  <div class="box_container">
    <!-- 输入框 -->
    <div class="box_input">
      <el-input v-model="pageinfo.title" placeholder="输入商品名称"></el-input>
      <el-input v-model="pageinfo.barcode" placeholder="输入条形码"></el-input>
      <el-select v-model="pageinfo.status" placeholder="请选择商品状态">
        <el-option v-for="item in adStatusMap" :key="item.value" :label="item.name" :value="item.value">
        </el-option>
      </el-select>
      <el-cascader v-model="pageinfo.categoryId" :options="commodity" :props="cmmodityParams" clearable placeholder="请选择优惠类目"></el-cascader>
      <el-button icon="el-icon-search" type="primary" @click="onSeek">查找</el-button>
      <el-button icon="el-icon-plus" type="primary" @click="addAdmin">添加</el-button>
    </div>
    <!-- 商品列表 -->
    <div class="box_table">
      <el-table :data="tableData" style="width: 100%" border ref="multipleTable">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column type="expand" label="sku信息" align="center">
          <template slot-scope="scope">
            <el-table :data="scope.row.skuList" stripe style="width: 100%">
              <el-table-column prop="barCode" label="商品条码" align="center">
              </el-table-column>
              <el-table-column prop="title" label="商品规格" align="center">
              </el-table-column>
              <el-table-column prop="stock" label="商品库存" align="center">
              </el-table-column>
              <el-table-column prop="price" label="原价" align="center">
              </el-table-column>
              <el-table-column prop="vipPrice" label="现价" align="center">
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="商品ID" prop="id" align="center">
        </el-table-column>
        <el-table-column label="名称" prop="title" align="center">
        </el-table-column>
        <el-table-column label="图片" prop="img" align="center">
          <template #default="scope">
            <el-popover placement="right" width="300" trigger="hover">
              <el-image style="width: 50px;" slot="reference" :src="scope.row.img"></el-image>
              <el-image style="width:100%;" :src="scope.row.img"></el-image>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="商品详情介绍" prop="img" align="center">
          <template #default="scope">
            <el-button size="mini" type="primary" @click="lookUp(scope.row.id)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="categoryId" label="类目ID" align="center">
        </el-table-column>
        <el-table-column prop="freightTemplateId" label="邮费模板ID" align="center">
        </el-table-column>
        <el-table-column prop="sales" label="销量" align="center">
        </el-table-column>
        <el-table-column prop="unit" label="单位" align="center">
        </el-table-column>
        <el-table-column label="是否在售" align="center" prop="status">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status == 1 ? 'success' : 'warning'">
              {{scope.row.status== "1"? "在售": "未售"}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="介绍" align="center">
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="grounDing(scope.row)">{{scope.row.status?'下架':'上架'}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 查看图片详情弹出框 -->
    <el-dialog title="商品详情" :visible.sync="dialogTableVisible" width="800px">
      <span slot="footer" class="dialog-footer">
        <div v-html="details" style="text-align: center; overflow: hidden;"></div>
        <el-button @click="dialogTableVisible = false">取消</el-button>
      </span>
    </el-dialog>
    <!-- 分页 --回到顶部 -->
    <div class="box_paging">
      <pagination :pageinfo="pageinfo" @change="changePage"></pagination>
    </div>
  </div>
</template>
<script>
import Pagination from "../../components/pagination/MyPagination.vue" //分页组件
import Apiadmin from "../../api/admin"
import { debounce } from '../../utils/debounce' //防抖
// import { Message } from 'element-ui'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      labelPosition: 'left',
      pageinfo: {
        limit: 10, //每页显示的数量
        page: 1,  //当前显示的页码
        total: 0, //数据总条数
        categoryId: '', //搜索分类
        title: '',//搜索标题
        barcode: '',//商品条形码
        status: '',//商品状态
      },
      tableData: [], //商品列表数据

      // 下拉框
      // 团购商品的状态
      adStatusMap: [{
        value: 0,
        name: '上架'
      },
      {
        value: 1,
        name: '下架'
      }],
      commodity: [], //团购商品数据
      cmmodityParams: { // 级联选择器的配置
        ocheckStrictly: true, // 父子节点不互相关联
        label: 'label',  //渲染上去的名字
        value: 'id', //选中时的id
        children: 'children',  //子节点数组
        emitPath: false // 只返回该节点的值
      },
      dialogTableVisible: false, //查看弹框隐藏
      details: [], //查看图片详情
    }
  },
  created() {
    this.operateList()
  },
  methods: {
    // 请求团购管理数据
    operateList() {
      Apiadmin.Product(this.pageinfo).then(res => {
        // console.log(res)
        if (res.errno == 200) {
          this.tableData = res.data.items  //表格数据
          this.pageinfo.total = res.data.count  //分页总数据
        }
      })
      // 请求商品类目数据  
      Apiadmin.categoryTrees().then(res => {
        // console.log(res)
        if (res.errno == 200) {
          this.commodity = res.data
        }
      })
    },
    // 查看
    lookUp(id) {
      this.dialogTableVisible = true
      Apiadmin.productList({ spuId: id }).then(res => {
        // console.log(res)
        if (res.errno == 200) {
          this.details = res.data.detail
        }
      })
    },
    // 上架下架
    grounDing: debounce(function (row) {
      this.$confirm('是否下架,是否上架?', '切换', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
        let status = row.status ? 0 : 1
        Apiadmin.grouAct({ spuId: row.id, status }).then(res => {
          if (res.errno == 200) {
            this.$message({
              message: row.status ? '下架成功' : '上架成功',
              type: 'success',

            })
            this.operateList()
          } else {
            this.$message({
              message: res.errmsg,
              type: 'error',

            });
          }
        })
      })

    }),
    gey() {
      this.$confirm('是否下架,是否上架?', '切换', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {

      }).catch(err => {
        console.log(err)
      })
    },
    //查找团购管理用户
    onSeek() {
      this.pageinfo.page = 1, //查找页数重置为1
        // 请求数据时加载
        this.$showLoading(() => {
          this.operateList()
        })
    },
    // 添加
    addAdmin() {
      this.$router.push("/index/shoppmanage/create")  //跳转到创建商品页面
    },
    // 编辑
    handleEdit(row) {
      this.$router.push({//跳转到编辑商品页面
        name: 'edit',
        params: {
          id: row.id
        }
      })
    },

    // 子传过来的方法和页长跟当前页
    changePage(e) {
      // console.log(e)
      this.pageinfo = JSON.parse(JSON.stringify(e))
      this.$nextTick(() => {
        this.operateList()
      })
    },
  }
}
</script>
<style scoped  lang="less">
.box_input {
  .el-input {
    width: 15%;
  }
}
.el-cascader {
  margin-right: 15px;
}
</style>